<template>
   <div class="page-min-wh100 bg-white movable">
      <div class="van-nav-head">
         <van-nav-bar title="movable" left-arrow @click-left="$router.go(-1)" :fixed="true"/>
      </div>
      <ok-movable custom-class="drag-fixed"
                  position="rm">
         <div @click="onFixed"
              class="drag-fixed-cont text-white flex justify-center align-center">fixed
         </div>
      </ok-movable>

      <div class="drag padding-sm margin-bottom-sm">
         <div class="demo-card">
            <div class="demo-card-title">最简单的滑动</div>
            <div class="demo-card-body">
               <ok-movable custom-class="drag-movable">
                  <div class="drag-cont text-white flex justify-center align-center">50*50</div>
               </ok-movable>
            </div>
         </div>
      </div>

      <van-row>
         <van-col span="12">
            <div class="drag padding-sm margin-bottom-sm">
               <div class="demo-card">
                  <div class="demo-card-title">position:center</div>
                  <div class="demo-card-body">
                     <ok-movable custom-class="drag-movable" position="center">
                        <div class="drag-cont text-white flex justify-center align-center">center</div>
                     </ok-movable>
                  </div>
               </div>
            </div>
         </van-col>
         <van-col span="12">
            <div class="drag padding-sm margin-bottom-sm">
               <div class="demo-card">
                  <div class="demo-card-title">指定x和y</div>
                  <div class="demo-card-body">
                     <ok-movable custom-class="drag-movable" x="50%" y="3000">
                        <div class="drag-cont text-white flex justify-center align-center">x,y</div>
                     </ok-movable>
                  </div>
               </div>
            </div>
         </van-col>
      </van-row>

      <div class="api padding-sm margin-bottom-sm">
         <div class="demo-card">
            <div class="demo-card-title">API</div>
            <div class="demo-card-body">

            </div>
         </div>
      </div>
      <div class="page-wh100 bg-main"></div>
   </div>
</template>

<script type="es6">
   import OkMovable from "../../components/ok/Movable";

   export default {
      components: {OkMovable},
      inject: ['reload'], /**reload(callback);对应provide中的数组值*/
      name: "movable",
      data() {
         return {}
      },
      mounted() {

      },
      methods: {
         onFixed() {
            this.$toast("fixed");
         }
      }
   }
</script>

<style lang="scss" scoped>
   .movable .title {
      font-size: 14px;
      padding-top: 10px;
      padding-bottom: 5px;
   }

   .drag {
      position: relative;

      .drag-movable {

      }

      .drag-cont {
         width: 50px;
         height: 50px;
         background: red;
      }
   }

   .drag-fixed {
      width: 100vw;
      position: fixed;
      height: calc(100vh - 46px);
      top: 46px;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 99;
      background: transparent;
   }

   .drag-fixed {
      .drag-fixed-cont {
         background: red;
         width: 50px;
         height: 50px;
      }
   }
</style>